import { useEffect, useState, useRef } from 'react';
import { SearchIcon, MenuIcon, XIcon, Home, Grid3X3, BookOpen, Star, Users, Phone, Heart } from 'lucide-react';
import { Link } from 'react-router-dom';
export const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const navigation = [{
    name: 'Home',
    href: '/',
    icon: Home
  }, {
    name: 'Categories',
    href: '/categories',
    icon: Grid3X3
  }, {
    name: 'Buying Guides',
    href: '/buying-guides',
    icon: BookOpen
  }, {
    name: 'Reviews',
    href: '/reviews',
    icon: Star
  }, {
    name: 'About Us',
    href: '/about',
    icon: Users
  }, {
    name: 'Contact',
    href: '/contact',
    icon: Phone
  }];
  // Handle click outside to close search
  useEffect(() => {
    if (!isSearchExpanded) return;
    const handleClickOutside = (event: MouseEvent) => {
      if (searchInputRef.current && !searchInputRef.current.contains(event.target as Node)) {
        setIsSearchExpanded(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isSearchExpanded]);
  // Focus search input when expanded
  useEffect(() => {
    if (isSearchExpanded && searchInputRef.current) {
      searchInputRef.current.focus();
    }
  }, [isSearchExpanded]);
  return <header className="bg-white shadow-sm sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <Link to="/" className="flex items-center text-2xl font-bold text-[#0e4c92]">
                <Heart className="h-6 w-6 mr-2 text-[#5cb8b2]" />
                MedSelect<span className="text-[#5cb8b2]">Hub</span>
              </Link>
            </div>
          </div>
          <nav className={`hidden md:flex space-x-8 ${isSearchExpanded ? 'opacity-0' : 'opacity-100'} transition-opacity duration-200`}>
            {navigation.map(item => {
              const IconComponent = item.icon;
              return (
                <Link key={item.name} to={item.href} className="flex items-center text-gray-700 hover:text-[#0e4c92] px-3 py-2 text-sm font-medium">
                  <IconComponent className="h-4 w-4 mr-1.5" />
                  {item.name}
                </Link>
              );
            })}
          </nav>
          <div className="hidden md:flex items-center">
            {isSearchExpanded ? <div ref={searchInputRef} className="relative animate-fade-in">
                <input type="text" placeholder="Search products, guides, reviews..." className="w-80 px-4 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#5cb8b2]" />
                <button onClick={() => setIsSearchExpanded(false)} className="absolute right-3 top-2.5 text-gray-400 hover:text-gray-600">
                  <XIcon className="h-4 w-4" />
                </button>
              </div> : <button onClick={() => setIsSearchExpanded(true)} className="p-1 rounded-full text-gray-600 hover:text-[#0e4c92] focus:outline-none">
                <SearchIcon className="h-6 w-6" />
              </button>}
          </div>
          <div className="flex md:hidden">
            <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="p-2 rounded-md text-gray-600 hover:text-[#0e4c92] focus:outline-none">
              {isMenuOpen ? <XIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>
      {/* Mobile menu */}
      {isMenuOpen && <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg">
            {navigation.map(item => {
              const IconComponent = item.icon;
              return (
                <Link key={item.name} to={item.href} className="flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50" onClick={() => setIsMenuOpen(false)}>
                  <IconComponent className="h-5 w-5 mr-3" />
                  {item.name}
                </Link>
              );
            })}
            <div className="mt-4 px-3">
              <div className="relative">
                <input type="text" placeholder="Search products..." className="w-full px-4 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#5cb8b2]" />
                <SearchIcon className="absolute right-3 top-2.5 h-4 w-4 text-gray-400" />
              </div>
            </div>
          </div>
        </div>}
    </header>;
};